<script setup lang="ts">
import { reactive, ref, watch, computed } from 'vue'



</script>
    
<template>
    <div class="container">
        <div class="container_left">
            <img src="/插画/devices.svg" alt="">
            <div class="container_left_title">智能终端，多端互联</div>
            <div style="color: #707070;font-size: 15px;">学习更轻松</div>
        </div>
        <div class="phone">
            <div class="buttons">
                <div class="left">
                    <div class="button"></div>
                    <div class="button"></div>
                    <div class="button"></div>
                </div>
                <div class="right">
                    <div class="button"></div>
                </div>
            </div>
            <div class="camera"></div>
            <div class="screen-container">
                <div class="bg">
                    <iframe src="https://m.imlearn.xyz" style="width:100%;height: 100%;"> </iframe>
                </div>
                <div class="notch-container">
                    <div class="notch">
                        <div class="content">
                            <div class="left">
                                <div class="tile"></div>
                                <div class="text"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="container_right">
            <img src="@/assets/ff.png" alt="">
        </div>
    </div>
</template>
    
<style scoped lang="scss">
$size: max(5px, 1vmin);
$height: 80em;
$pad: 1.25em;
$border-radius: 6.666em;
$gutter: calc($pad * 2);
$scene-pad: 5vmin;
$bg-blur: 0.333em;
$button-width: 0.333em;
$notch-height: 3.33em;
$notch-width: 33.3%;
$notch-radius: calc(6.666em - calc(1.25em * 2));
$notch-duration: 0.333s;
$ease: cubic-bezier(.666, 0, .4, 1);
$ease-spring: cubic-bezier(.666, 0, .4, 1.2);
$ease-out: cubic-bezier(.15, 0, .333, 1);
$border-width: 0.4em;
$deep-purple: 284;
// $gold: 22.5;
// $space-black: 215;
// $silver: 254;
$c-h: $deep-purple;
$c-s: 100%;
$c-l: 50%;




@keyframes appear {
    to {
        transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}



.container{
    margin-top: 100px;
    @include flex; 
    &_left{
        width: 300px;
        height: 300px;
        img{
            width: 100%;
            height: 100%;
        }
        &_title{
            font-size: 25px;
            color: $theme-color;
        }
    }

    &_right{
        width: 200px;
        height: 200px;
        box-shadow: $box-shadow;
        border-radius: 50%;
        padding: 10px;
        // background-color: #fff;
        img{
            width: 100%;
            height: 100%;
        }
    }
}


.phone {
    // margin: auto;
    font-size: $size;
    position: relative;
    z-index: 1;
    aspect-ratio: 37/76;
    background: black;
    height: $height;
    border-radius: $border-radius;
    box-shadow: 0 0 0.1em 0.25em hsl($c-h, 20%, 25%), 0 0 0 $border-width hsl($c-h, 30%, 85%);
    box-sizing: border-box;
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
    animation: appear 1s $ease-out forwards;
}

.phone:before {
    content: "";
    position: absolute;
    top: $border-radius;
    right: calc($border-width * -1);
    bottom: $border-radius;
    left: calc($border-width * -1);
    border: 0.5em solid hsl($c-h, 20%, 30%);
    border-left-width: 0;
    border-right-width: 0;
}

.buttons {
    position: absolute;
    inset: calc($border-width * -1);
    pointer-events: none;
}

.buttons .left,
.buttons .right {
    position: absolute;
    width: $button-width;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.5em;
}

.buttons .left {
    right: 100%;
    top: calc($border-radius * 2);
}

.buttons .left .button:nth-child(1) {
    height: 3em;
    margin-bottom: 0.5em;
}

.buttons .right {
    left: 100%;
    transform: scale3d(-1, 1, 1);
    top: calc($border-radius * 3);
}

.buttons .right .button {
    height: 9.5em;
}

.buttons .button {
    background: hsl($c-h, 20%, 95%);
    height: 6em;
    box-shadow: inset -0.15em 0 0.1em black, inset 0 0 0.1em hsl($c-h, 30%, 90%), inset 0 0.2em 0.1em hsl($c-h, 30%, 90%), inset 0 -0.2em 0.1em hsl($c-h, 30%, 90%), inset -0.1em 0.333em 0.1em rgba(0, 0, 0, 0.5), inset -0.1em -0.333em 0.1em rgba(0, 0, 0, 0.5);
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
}

.screen-container {
    position: absolute;
    inset: 0;
    border-radius: $border-radius;
    border: $pad solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc($pad * 2);
}

.screen-container:before {
    content: "";
    position: absolute;
    z-index: 2;
    background: white;
    width: 36.6%;
    bottom: calc($pad * 0.75);
    height: calc($pad * 0.5);
    border-radius: calc($pad* 0.25);
    filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.1));
}

.bg {
    position: absolute;
    inset: 0;
    // background: black;
    background-color: #fff;
    border-radius: calc($border-radius - $pad);
    overflow: hidden;
    transform: translateZ(0);
}



.notch-container {
    position: absolute;
    z-index: 3;
    top: $pad;
    right: $pad;
    left: $pad;
    display: flex;
    justify-content: center;
    height: 100%;
    max-height: calc($notch-radius * 2);
    pointer-events: none;
    outline: none;
    transition: $notch-duration $ease;
}

.notch-container:hover .content .text,
.notch-container:focus-within .content .text {
    opacity: 1;
}

.notch-container:hover .notch,
.notch-container:focus-within .notch {
    max-width: 100%;
    max-height: 100%;
    pointer-events: all;
    transform: scale3d(1, 1, 1);
}



.notch {
    position: relative;
    border-radius: $notch-radius;
    pointer-events: all;
    overflow: hidden;
    color: white;
    display: flex;
    cursor: pointer;
    width: 100%;
    transition: inherit;
    transition-property: inherit;
    will-change: inherit;
    // filter: drop-shadow(0 1em 2em hsla(0 0% 0%/$shadow-opacity, 0));
    transform: scale3d(0.375, 0.4, 1);
    transform-origin: top;
}

.notch:before {
    content: "";
    position: absolute;
    inset: 0;
    background: black;
}

.content {
    $content-padding: 1.75em;
    $duration-height: 0.5em;
    $content-gap: 1em;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    padding: $content-padding;
    gap: $content-gap;
    font-size: 125%;
    transition-property: padding;
    will-change: padding;
    position: relative;
}

.content .left {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 1em;
}

.content,
.content .left,
.content .text {
    transition: $notch-duration $ease-out;
}


.content .text {
    display: flex;
    flex-direction: column;
    gap: 0.333em;
    transition-property: opacity;
    opacity: 0;
}

.content .text:before {
    content: "智慧平台";
    order: 1;
    text-transform: uppercase;
}

.content .text:after {
    order: 2;
    content: "Smart Learn";
    opacity: 0.5;
}


.content .tile {
    background: #1a1ab3;
    height: 100%;
    aspect-ratio: 1;
    border-radius: 33.3%;
    position: relative;
}

.content .tile:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 55% 40%, #131386, #cd1385 75%, transparent) center/133.3% 133.3%;
    background-color: yellow;
    filter: blur(0.05em);
}



.camera {
    display: flex;
    justify-content: center;
    align-items: center;
    height: $notch-height;
    aspect-ratio: 1/1;
    border-radius: 50%;
    pointer-events: none;
    position: absolute;
    z-index: 4;
    top: calc($pad * 2);
    right: calc(50% - calc($notch-width * 0.5));
    margin-right: calc($pad * 0.333);
}

.camera:before {
    content: "";
    height: 33.3%;
    aspect-ratio: 1;
    border-radius: inherit;
    box-shadow: inset 0 0 0.25em #4c4da3;
    background: radial-gradient(#6667ac, transparent 50%) no-repeat 33.3% 10%/75% 50%, radial-gradient(#454680, transparent 50%) no-repeat 60% 85%/50% 50%;
    background-color: #080928;
}

.screen {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    flex-grow: 1;
    gap: $gutter;
    box-sizing: border-box;
    width: 100%;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: $gutter;
    padding-top: calc($gutter* 3);
    border-radius: calc($border-radius - $pad);
    transition: opacity 1s $ease-out 0.25s;
}
</style>